<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { UserOutlined } from "@ant-design/icons-vue";

const router = useRouter();
// defineProps<{ msg: string }>();

// const count = ref(0);

const toPath = () => {
  router.push({ name: 'User-Manage' })
}
</script>

<template>
  <div class="user-info">
    <div class="logo">
      <!-- <AliwangwangOutlined /> -->
    </div>
    <a-button type="primary">充值</a-button>
    <span>余额：10000.00元</span>
    <span>Mia</span>

    <a-popover trigger="click" placement="topRight">
      <template #content>
        <div class="user-btn-group">
          <a-button type="primary" @click='toPath'>账户管理</a-button>
          <a-button type="primary" danger>退出账号</a-button>
        </div>
      </template>
      <a-avatar>
        <template #icon>
          <UserOutlined />
        </template>
      </a-avatar>
    </a-popover>
  </div>
</template>

<style scoped lang="postcss">
.user-info {
  display: flex;
  height: 100%;
  color: #fff;
  align-items: center;
  justify-content: flex-end;

  .logo {
    margin-right: auto;
    font-size: 42px;
  }

  span {
    margin: 0 16px;
  }

  .ant-avatar {
    margin: 0;
    background-color: #87d068;
    cursor: pointer;
  }
}

.user-btn-group {
  .ant-btn {
    display: block;

    &:first-child {
      margin-bottom: 8px;
    }
  }
}
</style>
